import React from 'react';
// eslint-disable-next-line
import { useState, useEffect } from 'react';
import { useHistory } from "react-router-dom";
import useTitle from '../../../hooks/useTitle';
import data from '../../../static/cosplay/mock';
import './index.css';

function Experience() {
  useTitle(Experience.title);
  const url = useHistory().location.search;
  const role = Number(url.charAt(url.length - 1));
  const info = data[role]
  const [step, setStep] = useState(1);
  function nextStep(num) {
    switch (num) {
      case 0: {
        if (step <= 3) {
          setStep(step + 1)
        }
        break;
      }
      case 1: {
        if (step <= 7 && step >= 3) {
          setStep(step + 1)
        }
        break;
      }
      case 2: {
        if (step >= 7 & step <= 9) {
          setStep(step + 1)
        }
        break;
      }
      default:
        break;
    }
  }
  return (
    <div className='experience'>
      <div className='ex-leftbar'>
        <div className='liucheng-title'>
          流程
        </div>
        <div className='liucheng-item'>
          <div className='liucheng-name'>{info.name[0]}</div>
          <div className='liucheng-step-box'>
            <div className='liucheng-show-box'>
              <div className='liucheng-step-number' style={step > 0 ? { color: 'rgb(64, 197, 109)' } : null} >①</div>
              <div className='liucheng-link-line' style={step > 1 ? { backgroundColor: 'rgb(64, 197, 109)' } : null}></div>
              <div className='liucheng-step-number' style={step > 1 ? { color: 'rgb(64, 197, 109)' } : null}>②</div>
              <div className='liucheng-link-line' style={step > 2 ? { backgroundColor: 'rgb(64, 197, 109)' } : null}></div>
              <div className='liucheng-step-number' style={step > 2 ? { color: 'rgb(64, 197, 109)' } : null}>③</div>
              <div className='liucheng-link-line' style={step > 3 ? { backgroundColor: 'rgb(64, 197, 109)' } : null}></div>
              <div className='liucheng-step-number' style={step > 3 ? { color: 'rgb(64, 197, 109)' } : null}>④</div>
            </div>
            <div className='liucheng-text-box'>
              <div className='liucheng-step-text' style={step > 0 ? { color: 'rgb(64, 197, 109)' } : null}>{info.steps[0]}</div>
              <div className='liucheng-step-text' style={step > 1 ? { color: 'rgb(64, 197, 109)' } : null}>{info.steps[1]}</div>
              <div className='liucheng-step-text' style={step > 2 ? { color: 'rgb(64, 197, 109)' } : null}>{info.steps[2]}</div>
              <div className='liucheng-step-text' style={step > 3 ? { color: 'rgb(64, 197, 109)' } : null}>{info.steps[3]}</div>
            </div>
          </div>
          <div className='liucheng-button' onClick={() => nextStep(0)}>下一步</div>
        </div>
        <div className='liucheng-item'>
          <div className='liucheng-name'>{info.name[1]}</div>
          <div className='liucheng-step-box'>
            <div className='liucheng-show-box'>
              <div className='liucheng-step-number' style={step > 4 ? { color: 'rgb(64, 197, 109)' } : null}>①</div>
              <div className='liucheng-link-line' style={step > 5 ? { backgroundColor: 'rgb(64, 197, 109)' } : null}></div>
              <div className='liucheng-step-number' style={step > 5 ? { color: 'rgb(64, 197, 109)' } : null}>②</div>
              <div className='liucheng-link-line' style={step > 6 ? { backgroundColor: 'rgb(64, 197, 109)' } : null}></div>
              <div className='liucheng-step-number' style={step > 6 ? { color: 'rgb(64, 197, 109)' } : null}>③</div>
              <div className='liucheng-link-line' style={step > 7 ? { backgroundColor: 'rgb(64, 197, 109)' } : null}></div>
              <div className='liucheng-step-number' style={step > 7 ? { color: 'rgb(64, 197, 109)' } : null}>④</div>
            </div>
            <div className='liucheng-text-box'>
              <div className='liucheng-step-text' style={step > 4 ? { color: 'rgb(64, 197, 109)' } : null}>{info.steps[4]}</div>
              <div className='liucheng-step-text' style={step > 5 ? { color: 'rgb(64, 197, 109)' } : null}>{info.steps[5]}</div>
              <div className='liucheng-step-text' style={step > 6 ? { color: 'rgb(64, 197, 109)' } : null}>{info.steps[6]}</div>
              <div className='liucheng-step-text' style={step > 7 ? { color: 'rgb(64, 197, 109)' } : null}>{info.steps[7]}</div>
            </div>
          </div>
          <div className='liucheng-button' onClick={() => nextStep(1)} style={step < 4 ? { backgroundColor: 'rgb(107, 107, 107, 0.6)' } : null}>下一步</div>
        </div>
        <div className='liucheng-item'>
          <div className='liucheng-name'>{info.name[2]}</div>
          <div className='liucheng-step-box'>
            <div className='liucheng-show-box'>
              <div className='liucheng-step-number' style={step > 8 ? { color: 'rgb(64, 197, 109)' } : null}>①</div>
              <div className='liucheng-link-line' style={step > 9 ? { backgroundColor: 'rgb(64, 197, 109)' } : null}></div>
              <div className='liucheng-step-number' style={step > 9 ? { color: 'rgb(64, 197, 109)' } : null}>②</div>
            </div>
            <div className='liucheng-text-box'>
              <div className='liucheng-step-text' style={step > 8 ? { color: 'rgb(64, 197, 109)' } : null}>{info.steps[8]}</div>
              <div className='liucheng-step-text' style={step > 9 ? { color: 'rgb(64, 197, 109)' } : null}>{info.steps[9]}</div>
            </div>
          </div>
          <div className='liucheng-button' onClick={() => nextStep(2)} style={step < 8 ? { backgroundColor: 'rgb(107, 107, 107, 0.6)' } : null}>下一步</div>
        </div>
      </div>
      <div className='ex-rightbar'>
        <div className={info.image[step-1]} style={{
          width: '800px',
          height: '600px',
          backgroundSize: '100% 100%'
        }}></div>
      </div>
    </div>
  );
}

Experience.path = '/experience';
Experience.title = '角色职能';
Experience.meta = {
  keywords:
    '角色职能',
  description:
    '宠物医院 角色扮演 学习知识'
};
Experience.exact = true;

export default Experience;
